<template>
  <el-button v-bind="setButton(btn).bind" v-on="setButton(btn).on">
    {{ btn.label }}
  </el-button>
</template>

<script>
// 按钮
// @group Table
export default {
  name: 'Button',
  props: {
    // 查看element-ui button组件
    btn: {
      type: Object,
      default: () => {}
    },
    // 表格行
    row: {
      type: Object,
      default: () => {}
    },
    // 索引
    index: {
      type: Number,
      default: 0
    },
    // 表格数据
    data: {
      type: Array,
      default: () => []
    }
  },
  computed: {
  },
  methods: {
    isFunction(fn) {
      return typeof fn === 'function'
    },
    // 设置按钮属性、事件
    setButton(btn) {
      const { row, index } = this
      const { on = {}, label, ...rest } = btn

      const disabled = this.isFunction(btn.disabled) ? btn.disabled(row, index) : false

      const click = this.isFunction(on.click) ? () => {
        on.click(row, index)
      } : () => {}

      if (label === '删除' && !disabled) {
        rest.style = {
          color: '#F5222D'
        }
      }
      return {
        bind: {
          size: "small",
          type: "text",
          ...rest,
          disabled,
        },
        on: {
          click,
        }
      }
    },
  }
}
</script>

<style lang="scss" scoped>
</style>
